/**
 * Created by guiyongdong on 16/9/30.
 */
'use strict';
import React, {Component} from 'react';

import  {
    StyleSheet,
    View,
    Image,
    Text,
    TouchableOpacity,
    PixelRatio,
    Dimensions,
    Platform
} from 'react-native';

import PlusNumber from '../../commentView/PlusNumber'

class Item extends Component {
    // 构造
    constructor(props) {
        super(props);
        var good =  props.good;
        this.state = {
            good:good
        };
    }
    _getTagsView() {
        var tags = [];
        var tempTags = this.state.good['tags'].split(',');
        for (var i = 0; i < tempTags.length;i++){
            var  tag = tempTags[i];
            if (tag.length > 0){
                tags.push(tag);
            }
        }
        var tagViews = [];
        var paddingZore = {};
        if (Platform.OS == 'android') {
            paddingZore = {paddingTop:-1/PixelRatio.get()};
        }
        if(tags.length == 0) {
            tagViews.push(
                <Text style={[styles.normalTagItem,paddingZore]} key={'tag'}>{'精选'}</Text>
            );
        }else {
            for (var i = 0; i < tags.length; i++){
                tagViews.push(
                    <Text style={[styles.tagItem,paddingZore]} key={'tag'+i}>{tags[i]}</Text>
                );
            }
        }
        return(tagViews)
    }

    render(){
        var tagViews = this._getTagsView();
        return(
            <View>
                <Image resizeMode='stretch'
                       style={styles.image}
                       source={{uri:this.state.good['avatar_url']}}/>
                <Text style={styles.goodName} numberOfLines={2}>{this.state.good['title']}</Text>
                <View style={styles.bgView}>
                    <View style={styles.tagView}>{tagViews}</View>
                    <Text style={styles.price}>{'￥'+this.state.good['price']}</Text>
                    <Text style={styles.marketPrice}>{this.state.good['marketPrice']}</Text>
                    {this._getPlusNumber()}
                </View>
            </View>
        );
    }
    _getPlusNumber(){
        var stock = this.state.good['stock'];
        if (stock > 0){
            return(
                <PlusNumber 
                    style={styles.plusNumber}
                    good = {this.state.good}/>
            )
        }else{
            return(
                <View style={styles.stokeView}>
                    <Text style={styles.stoke}>补货中</Text>
                </View>
            )
        }
    }
}

export  default class HomeGoodView extends  Component {
    render() {
        var good0 = this.props.goods[0];
        var good1 = this.props.goods[1];
        return (
            <View style={[this.props.style,styles.flex]}>
                <TouchableOpacity activeOpacity={0.8}>
                    <View style={styles.leftItem}>
                        <Item good={good0}/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity activeOpacity={0.8}>
                    <View style={styles.rightItem}>
                        <Item good={good1}/>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }
}


const styles = StyleSheet.create({
    flex:{
        flex:1,
        flexDirection:'row',
        backgroundColor:'#F2F2F2',
        flexWrap:'wrap',
        overflow:'hidden'
    },
    leftItem:{
        width:(Dimensions.get('window').width - 3)/2.0,
        height:(Dimensions.get('window').width - 3)/2.0+92,
        backgroundColor:'white',
        flexDirection:'row',
        flexWrap:'wrap'
    },
    rightItem:{
        width:(Dimensions.get('window').width - 3)/2.0,
        height:(Dimensions.get('window').width - 3)/2.0+92,
        marginLeft:3,
        backgroundColor:'white',
        flexDirection:'row',
        flexWrap:'wrap'
    },
    image:{
        width:(Dimensions.get('window').width - 3)/2.0,
        height:(Dimensions.get('window').width - 3)/2.0
    },
    goodName:{
        width:(Dimensions.get('window').width - 3)/2.0 - 4,
        marginLeft:2,
        marginTop:9,
        fontSize:15,
        height:40,
        color:'#282828'
    },
    bgView:{
        width:(Dimensions.get('window').width - 3)/2.0 - 4,
        flexDirection:'row',
        flexWrap:'wrap',
        marginLeft:2
    },
    tagView:{
        width:(Dimensions.get('window').width - 3)/2.0 - 4,
        height:17,
        marginTop:3,
        marginLeft:0,
        flexDirection:'row',
        flexWrap:'wrap'
    },
    tagItem:{
        fontSize:11,
        color:'white',
        textAlign:'center',
        borderColor:'white',
        borderRadius:3,
        marginLeft:4,
        marginTop:1,
        height:15,
        padding:2,
        backgroundColor:'#FF2828',
        overflow:'hidden'
    },
    normalTagItem:{
        fontSize:11,
        color:'#FF2828',
        textAlign:'center',
        borderColor:'#FF2828',
        borderWidth:1/PixelRatio.get(),
        borderRadius:3,
        marginLeft:4,
        marginTop:1,
        height:15,
        padding:2
    },
    price:{
        fontSize:16,
        color:'red',
        height:23,
        paddingTop:2
    },
    marketPrice:{
        marginLeft:7,
        height:23,
        flexDirection:'row',
        flexWrap:'wrap',
        alignItems:'center',
        color:'#A0A0A0',
        fontSize:13,
        paddingTop:5
    },
    plusNumber:{
        width:100,
        height:32,
        position:'absolute',
        left:(Dimensions.get('window').width - 3)/2.0-110,
        top:0,
        flexDirection:'row',
        flexWrap:'wrap'
    },
    stokeView:{
        width:100,
        height:32,
        position:'absolute',
        left:(Dimensions.get('window').width - 3)/2.0-110,
        top:0,
        alignItems:'flex-end',
        justifyContent:'center'
    },
    stoke:{
        fontSize:15,
        color:'red'
    }
});
